<template>
  <div class="home">
    <div class="home-top">
      <div class="home-title">
        <img src="@/assets/image/page/ic_welcome@2x.png" />
        <span>欢迎来到憧憬号邮轮!</span>
      </div>
      <div class="switch-lang">
        <img src="@/assets/image/page/ic_yyqh@2x.png" />
        <span>中文</span>
      </div>
    </div>
    <!-- content -->

    <div class="home-body">
      <div class="weather-card">
          <div class="weather-card-left">
            <div class="weather-card-left-top">
              <span>22°C</span>
              <span>晴</span>
            </div>
            <div class="weather-card-right-bottom">
              <span>风速：</span>
              <span>3.6(m/s)</span>
            </div>
          </div>
          <div class="weather-card-right">
            <div ref="barChart" class="barChart"></div>
            <div class="time">
              <div class="start-time">
                <img src="@/assets/image/page/ic_rcsj@2x.png" alt="">
                <span>05:42</span>
              </div>
              <div class="end-time">
                <img src="@/assets/image/page/ic_rcsj@2x.png" alt="">
                <span>19:42</span>
              </div>
            </div>
          </div>
      </div>
      <div class="crew-info">
        <div class="crew-info-left">
          <div class="crew-info-left-top">
            <div class="room-info-top">
              <div class="room-icon"><img src="@/assets/image/page/ic_room@2x.png" alt=""></div>
              <div class="room-info">
                <span>A-12888</span>
                <div class="room-info-btn sun-room">
                  <span>阳台房</span>
                </div>
              </div>
            </div>
            <div class="room-info-bottom">
              <span>房间号</span>
            </div>
          </div>
          <div class="crew-info-left-bottom">
            <div class="crew-info-left-bottom-top">
              <div class="room-bottom-icon">
                <img src="@/assets/image/page/ic_jjjhd@2x.png" alt="">
              </div>
              <span>二楼甲板</span>
            </div>
            <div class="crew-info-left-bottom-bottom">
              <span>紧身集合点</span>
            </div>

          </div>
        </div>
        <div class="crew-info-right"></div>
      </div>
      <div class="crew-note"></div>
      <div class="crew-day-info">

      </div>
      <div class="crew-video"></div>
    </div>
    <div v-if="false" class="content">
      <!--weather-box-->
      <div class="weather-box">
        <div class="weather-mess">
          <div class="weather-mess-top">
            <h3>22℃<span>晴</span></h3>
            <p>风速：3.6(m/s)</p>
          </div>
        </div>
        <div class="line"></div>
        <div class="weather">
          <div class="weather-top">
            <!-- <canvas id="can" width="1.06rem" height=".38rem"></canvas> -->
          </div>
          <div class="weather-detail">
            <p>
              <img src="@/assets/image/page/ic_rcsj@2x.png" />
              <span>05:42</span>
            </p>
            <p>
              <img src="@/assets/image/page/ic_rcsj@2x.png" />
              <span>05:42</span>
            </p>
          </div>
        </div>
      </div>
      <!--room-box-->
      <div class="room-box">
        <div class="room-type">
          <div class="room-mess">
            <div class="room-mess-title">
              <div class="room-icon">
                <img src="@/assets/image/page/ic_room.png" />
                <h4>A-12888</h4>
              </div>
              <span>阳台房</span>
            </div>
            <p>房间号</p>
          </div>
          <div class="room-mess">
            <div class="room-mess-title">
              <div class="room-icon">
                <img src="@/assets/image/page/ic_jjjhd.png" />
                <h4>二楼甲板</h4>
              </div>
            </div>
            <p>紧急集合点</p>
          </div>
        </div>
        <div class="meals-detail">
          <div class="room-mess-title">
            <div class="room-icon">
              <img src="@/assets/image/page/ic_yongcan.png" />
              <h4>A-12888</h4>
            </div>
            <span>阳台房</span>
          </div>
          <ul>
            <li>
              <span>午餐</span>
              <em>7:30-8:30</em>
            </li>
            <li>
              <span>早餐</span>
              <em>11:30-13:30</em>
            </li>
            <li>
              <span>晚餐</span>
              <em>17:30-19:30</em>
            </li>
          </ul>
          <div class="meals-type">
            <img src="@/assets/image/page/ic_ctwz.png" alt="" />
            <p>2F公共餐厅/1F正餐厅</p>
          </div>
        </div>
      </div>
      <!-- cruise-announcement -->
      <div class="cruise-announcement">
        <div class="room-mess-title room-mess-title1">
          <div class="room-icon">
            <img src="@/assets/image/page/ic_gonggao.png" />
            <h4>邮轮公告</h4>
          </div>
          <p>{{ cruiseMsg }}</p>
        </div>
      </div>
      <!--ruise-daily-->
      <div class="ruise-daily">
        <div class="room-mess-title room-mess-title1 room-mess-title2">
          <div class="room-icon">
            <img src="@/assets/image/page/ic_ribao.png" />
            <h4>邮轮日报</h4>
          </div>
          <div class="ruise-more">
            <em>查看详情</em>
            <img src="@/assets/image/page/ic_ckxq.png" alt="" />
          </div>
        </div>
        <div class="ruise-main">
          <p>
            {{ dailyMsg }}
          </p>
          <!-- <span>今天 10:20</span> -->
          <span v-show="dailyMsgDate">{{ dailyMsgDate | dateTime }} </span>
        </div>
      </div>
      <!-- entertainment-box -->
      <div class="entertainment-box">
        <div class="room-mess-title room-mess-title1 room-mess-title2">
          <div class="room-icon">
            <img src="@/assets/image/page/ic_ylzx.png" />
            <h4>娱乐中心</h4>
            <p>在线视频免费观看</p>
          </div>
          <div class="ruise-more">
            <img src="@/assets/image/page/ic_ckxq.png" alt="" />
          </div>
        </div>
      </div>
      <!-- route-box -->
      <div class="route-box">
        <div class="room-mess-title">
          <div class="room-icon">
            <img src="@/assets/image/page/ic_hangxian.png" />
            <h4>航线信息</h4>
          </div>
        </div>
        <!-- <ul>
          <li>中国·天津</li>
          <li class="active">日本·福冈</li>
          <li>中国·深圳</li>
          <li>中国·大理</li>
        </ul> -->
        <van-steps :active="active" active-color="#00428E" inactive-color="#333333">
          <van-step>中国·天津</van-step>
          <van-step>日本·福冈</van-step>
          <van-step>中国·深圳</van-step>
          <van-step>中国·大理</van-step>
        </van-steps>
        <img src="@/assets/image/page/bg_hxsyt.png" alt="" class="route-img" />
      </div>
      <!-- liner-box -->
      <div class="liner-box">
        <div class="recommend-top">
          <h3>邮轮设施</h3>
          <img src="@/assets/image/page/bg_bt.png" />
        </div>
        <ul>
          <li v-for="(item, index) in exploreList" :key="index">
            <img :src="item.facilityPhoto" alt="" />
            <!--  1 美食 2 酒吧 3 免税店 4 演出 -->
            <img
              :src="
                item.facilityIcon == '1'
                  ? ic_sy_ct
                  : item.facilityIcon == '2'
                  ? ic_sy_jb
                  : item.facilityIcon == '3'
                  ? ic_sy_msd
                  : ic_sy_yc
              "
              alt=""
              class="liner-img1"
            />
            <img src="@/assets/image/page/ic_sy_jr@2x.png" class="liner-img2" alt="" />
            <p>{{ item.facilityName }}</p>
          </li>
          <!-- <li>
            <img
              src="https://img0.baidu.com/it/u=3765150747,4228224511&fm=26&fmt=auto&gp=0.jpg"
              alt=""
            />
            <img
              src="@/assets/image/page/ic_sy_ct@2x.png"
              alt=""
              class="liner-img1"
            />
            <img
              src="@/assets/image/page/ic_sy_jr@2x.png"
              class="liner-img2"
              alt=""
            />
            <p>餐厅</p>
          </li>
          <li>
            <img
              src="https://img0.baidu.com/it/u=3765150747,4228224511&fm=26&fmt=auto&gp=0.jpg"
              alt=""
            />
            <img
              src="@/assets/image/page/ic_sy_ct@2x.png"
              alt=""
              class="liner-img1"
            />
            <img
              src="@/assets/image/page/ic_sy_jr@2x.png"
              class="liner-img2"
              alt=""
            />
            <p>餐厅</p>
          </li>
          <li>
            <img
              src="https://img0.baidu.com/it/u=3765150747,4228224511&fm=26&fmt=auto&gp=0.jpg"
              alt=""
            />
            <img
              src="@/assets/image/page/ic_sy_ct@2x.png"
              alt=""
              class="liner-img1"
            />
            <img
              src="@/assets/image/page/ic_sy_jr@2x.png"
              class="liner-img2"
              alt=""
            />
            <p>餐厅</p>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import echart from '@/assets/echarts/echarts.js'

import ic_sy_ct from '@/assets/image/page/ic_sy_ct@2x.png'
import ic_sy_jb from '@/assets/image/page/ic_sy_jb@2x.png'
import ic_sy_msd from '@/assets/image/page/ic_sy_msd@2x.png'
import ic_sy_yc from '@/assets/image/page/ic_sy_yc@2x.png'

import { CruiseAnnouncement, CruiseDaily, exploreInfoList } from '@/api/home.js'
export default {
  name: 'Home',
  data() {
    return {
      ic_sy_ct,
      ic_sy_jb,
      ic_sy_msd,
      ic_sy_yc,
      active: 1,
      cruiseMsg: '', // 邮轮公告,
      dailyMsg: '', // 邮轮日报
      exploreList: '', // 邮轮设施
      dailyMsgDate: '' // 邮轮日报 日期 //2021-06-03
    }
  },
  created() {
    this.getCruise() // 邮轮公告
    this.cruiseDaily() // 邮轮日报
    this.exploreInfoList() // 邮轮设施
  },
  mounted() {
    this.drawChart()
    // this.getMycanvas1(60)
  },
  methods: {
    // 邮轮设施
    async exploreInfoList() {
      const res = await exploreInfoList()
      console.log(res.data.data)
      this.exploreList = res.data.data
    },
    // 邮轮公告
    async getCruise() {
      const res = await CruiseAnnouncement()
      this.cruiseMsg = res.data.data[0].noyiceContent
      // this.tableData = res.data;
    },
    // 邮轮日报
    async cruiseDaily() {
      const res = await CruiseDaily()
      this.dailyMsg = res.data.data[0].dailyContent
      this.dailyMsgDate = res.data.data[0].createTime
    },
    drawChart() {
      const echart = this.$echarts.init(this.$refs.barChart)
      echart.setOption({
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          splitNumber: 8,
          itemStyle: {
            // show:false,
            color: '#FFD528',
            shadowColor: 'rgba(255,213,40,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2

          },
          progress: {
            show: false,
            roundCap: true,
            width: 1
          },
          pointer: {
            show: true,
            icon: 'image://https://gitee.com/Smecta/image/raw/master/ch/ic_ty@2x202106050208.png',
            width: 45,
            length: 45,
            offsetCenter: [0, '-15%']
          },
          axisLine: {
            show: false,
            roundCap: true,
            lineStyle: {
              width: 3
            }
          },
          axisTick: {
            splitNumber: 1,
            lineStyle: {
              width: 4,
              // length: 2,
              color: '#CCCCCC'
            }
          },
          splitLine: {
            show: false,
            length: 1,
            lineStyle: {
              width: 3,
              color: '#999'
            }
          },
          axisLabel: {
            show: false,
            distance: 30,
            color: '#999',
            fontSize: 10
          },
          title: {
            show: false
          },
          detail: {
            show: false,
            backgroundColor: '#fff',
            borderColor: '#999',
            borderWidth: 2,
            width: '60%',
            lineHeight: 40,
            height: 40,
            borderRadius: 8,
            offsetCenter: [0, '35%'],
            valueAnimation: true,
            formatter: function(value) {
              return '{value|' + value.toFixed(0) + '}{unit|km/h}'
            },
            rich: {
              value: {
                fontSize: 50,
                fontWeight: 'bolder',
                color: '#777'
              },
              unit: {
                fontSize: 20,
                color: '#999',
                padding: [0, 0, -20, 10]
              }
            }
          },
          data: [{
            value: 30
          }]
        }]
      })
    }

  },
  components: {}
}
</script>

<style lang="scss" scoped>
.home {
  background: #f9faff;
  width: 100%;
  // height: 100%;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .home-top {
    box-sizing: border-box;
    height: 176px;
    background: url('../../assets/image/page/bg_sy@2x.png') no-repeat center;
    background-size: 100% 100%;
    display:flex;
    justify-content: space-between;
    padding:63px 15px 0px 15px;
    // align-items: center;
     .home-title {
       display:flex;
      //  align-items: center;
        img {
          width: 20px;
          height: 20px;
        }
        span {
          font-size:16px;
          line-height: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          margin-left:3px;
        }
      }
      .switch-lang {
        display:flex;
        img {
          width: 18px;
          height: 18px;
        }
        span {
          display: block;
          font-size: 15px;
          line-height: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          margin-left:5px;
        }
      }
  }
  .home-body{
    padding: 0 15px;
    position:relative;
    bottom:70px;
    .weather-card{
      height:82px;
      box-sizing: border-box;
      background:#fff;
      border-radius: 6px;
      padding:13px 15px;
      display:flex;
      justify-content: space-between;
      .weather-card-left{
        .weather-card-left-top{
          & span:first-child{
            font-size: 26px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #00428E;
          }
          & span:last-child{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00428E;
            margin-left:8px;
            position:relative;
            bottom:2px;
          }
        }
        .weather-card-right-bottom{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
      .weather-card-right{
        border-left:1px solid #F3F3F3;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        .barChart{
          position:absolute;
          bottom:-25px;
          width:205px;
          height:107px;
        }
        .time{
          display:flex;
          img{
            width: 16px;
            height:16px;
          }
          span{
            font-size: 16px;
            font-family: Helvetica;
            color: #333333;
            margin-left:4px;
            // line-height: 19px;
          }
          .start-time{
            margin-left:15px;
            display:flex;
            align-items: center;
          }
          .end-time{
            margin-left:49px;
            display:flex;
            align-items: center;
          }
        }
      }
    }
    .crew-info{
      height:147px;
      border-radius: 6px;
      margin-top:20px;
      .crew-info-left{

        .crew-info-left-top{
          padding:10px 15px;
          // width:170px;
          background: skyblue;
          border-radius: 6px;
          box-sizing: border-box;
          .room-info-top{
            display: flex;
            align-items: center;
            gap:2px;
            .room-icon{
            width:18px;
            height:18px;
          }
          .room-info {
            display:flex;
            align-items: center;
            gap:5px;
            span{
              &:first-child{
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
              }
            }
            .room-info-btn{
              span{
                font-size: 10px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
              }
            }
            .sun-room{
              width: 44px;
              height: 17px;
              background: linear-gradient(180deg, #FFC2A530 0%, #FF9A6C30 100%);
              border-radius: 9px;
              display:flex;
              justify-content: center;
              align-items: center;
            }
          }
          }
          .room-info-bottom{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
        .crew-info-left-bottom{
          padding:10px 15px;
          // width:170px;
          background: skyblue;
          border-radius: 6px;
          box-sizing: border-box;
          .crew-info-left-bottom-top{
            .room-bottom-icon{
              width: 18px;
              height:18px;
            }
            span{
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }
          }
          .crew-info-left-bottom-bottom{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
    .crew-note{
      height:40px;
      background: #fff;
    }
    .crew-day-info{
      height:123px;
      background: #fff;
    }
    .crew-video{
      height:40px;
      background:#fff;
    }
  }
  .content {
    // margin-bottom: 9.6px;
    .room-icon {
      display: flex;
    }
    .room-mess-title {
      padding-top: 1.6px;
      display: flex;
      margin-left: 2.4px;
      justify-content: space-between;
      img {
        width: 2.88px;
        height: 2.88px;
        margin-right: 0.32px;
        margin-top: 0.32px;
      }
      h4 {
        height: 3.52px;
        font-size: 2.56px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 3.52px;
      }
      span {
        margin-top: 0.32px;
        margin-right: 2.4px;
        display: block;
        width: 7.04px;
        height: 2.72px;
        line-height: 2.72px;
        text-align: center;
        background: linear-gradient(180deg, rgba(255, 194, 165, 0.3) 0%, rgba(255, 154, 108, 0.3) 100%);
        border-radius: 1.44px;
        //opacity: 0.3;
        font-size: 1.6px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
    margin-top: -3.2px;
    margin-left: 2.4px;
    width: 55.2px;
    .weather-box {
      display: flex;
      width: 55.2px;
      background: #ffffff;
      border-radius: 0.96px;
      padding-bottom: 1.44px;
      .weather-mess {
        width: 23.04px;
        .weather-mess-top {
          margin-bottom: 1.28px;
          padding: 1.28px 0 0 2.4px;
          h3 {
            font-size: 4.16px;
            height: 5.92px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #00428e;
            line-height: 5.92px;
            span {
              font-size: 2.24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00428e;
              line-height: 3.2px;
              height: 3.2px;
            }
          }
          p {
            font-size: 2.24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }
      }
      .line {
        width: 0.0625rem;
        height: 8.96px;
        background: #f3f3f3;
        margin-top: 2.08px;
      }
      .weather {
        width: 32px;
        position: relative;
        .weather-top {
          width: 32px;
          height: 11.68px;
          font-size: 0.875rem;
        }
        .weather-detail {
          position: absolute;
          bottom: 0;
          left: 0;
          padding-left: 2.4px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          p {
            display: flex;
            span {
              margin-right: 0.64px;
              height: 3.04px;
              font-size: 2.56px;
              font-family: Helvetica;
              color: #333333;
              line-height: 3.04px;
            }
          }
          p:first-child {
            margin-right: 7.84px;
          }
          img {
            width: 2.56px;
            height: 2.56px;
          }
        }
      }
    }
    .room-box {
      margin-bottom: 3.2px;
      margin-top: 3.2px;
      display: flex;
      justify-content: space-between;
      .room-type {
        .room-mess {
          background: #fff;
          width: 26.4px;
          height: 10.56px;
          background: #ffffff;
          border-radius: 0.96px;
          margin-bottom: 2.4px;
          border-radius: 0.96px;
          p {
            height: 2.72px;
            font-size: 0.75rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 2.72px;
            margin-left: 2.4px;
            padding-top: 1.12px;
          }
        }
      }
      .meals-detail {
        width: 26.4px;
        height: 23.52px;
        background: #fff;
        border-radius: 0.96px;
        ul {
          margin-top: 1.28px;
          li {
            padding: 0 2.4px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.64px;
            span {
              height: 2.72px;
              font-size: 1.92px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 2.72px;
            }
            em {
              font-style: normal;
              height: 3.04px;
              font-size: 2.56px;
              font-family: Helvetica;
              color: #333333;
              line-height: 3.04px;
            }
          }
        }
        .meals-type {
          margin-top: 2.24px;
          display: flex;
          img {
            width: 2.88px;
            height: 2.88px;
            margin-left: 2.4px;
            margin-right: 0.32px;
          }
          p {
            width: 18.56px;
            height: 2.72px;
            font-size: 1.92px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 2.72px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .cruise-announcement {
      width: 55.2px;
      height: 6.4px;
      background: #fff;
      margin-bottom: 3.2px;
      border-radius: 0.96px;
      .room-mess-title1 {
        padding-top: 1.44px;
      }
      p {
        width: 35.68px;
        height: 2.56px;
        font-size: 1.92px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 2.72px;
        margin-top: 0.48px;
      }
    }
    .ruise-daily {
      width: 55.2px;
      background: #fff;
      padding-bottom: 1.6px;
      border-radius: 0.96px;
      .room-mess-title2 {
        padding-bottom: 1.44px;
        width: 50.4px;
        border-bottom: 0.0625rem solid #f3f3f3;
        .ruise-more {
          display: flex;
          margin-top: 0.48px;
          em {
            font-style: normal;
            height: 2.72px;
            font-size: 1.92px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 2.72px;
          }
          img {
            width: 2.56px;
            height: 2.56px;
          }
        }
      }
      .ruise-main {
        width: 50.4px;
        margin-left: 2.4px;
        padding-top: 1.6px;
        p {
          font-size: 2.24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 3.2px;
          padding-bottom: 1.28px;
          text-align: justify;
        }
        span {
          height: 2.24px;
          font-size: 1.6px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 2.24px;
          display: block;
          text-align: right;
        }
      }
    }
    .entertainment-box {
      background: #fff;
      margin-top: 3.2px;
      height: 6.4px;
      background: #ffffff;
      border-radius: 0.96px;
      p {
        height: 2.56px;
        font-size: 1.92px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 2.72px;
        margin-top: 0.48px;
        margin-left: 2.56px;
      }
      .ruise-more {
        margin-right: 2.4px;
      }
    }
    .route-box {
      margin: 3.2px 0 4.8px;
      background: #ffffff;
      border-radius: 0.96px;
      padding-bottom: 2.24px;
      ul {
        display: flex;
        padding-bottom: 4.32px;
        li {
          height: 2.72px;
          font-size: 1.92px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 2.72px;
          margin-left: 2.4px;
          margin-top: 2.08px;
        }
        .active {
          margin-top: 1.6px;
          height: 3.2px;
          font-size: 2.24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #00428e;
          line-height: 3.2px;
        }
      }
      /deep/ [class*='van-hairline']::after {
        border: none;
      }
      .route-img {
        margin-top: 4.32px;
        width: 50.4px;
        height: 31.52px;
        margin-left: 2.4px;
      }
    }
    .liner-box {
      .recommend-top {
        position: relative;
        height: 4.16px;
        h3 {
          font-size: 2.56px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          font-weight: bold;
          position: absolute;
          left: 0;
          top: -2.4px;
        }
        img {
          width: 7.04px;
          height: 1.92px;
        }
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          position: relative;
          width: 26.4px;
          height: 29.76px;
          img {
            width: 26.4px;
            height: 29.76px;
            border-radius: 0.96px;
          }
          margin-bottom: 2.4px;
          p {
            left: 5.12px;
            top: 3.04px;
            position: absolute;
            height: 3.52px;
            font-size: 2.56px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 3.52px;
            text-shadow: 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5);
          }
          .liner-img1,
          .liner-img2 {
            position: absolute;
          }
          .liner-img1 {
            width: 2.56px;
            height: 2.56px;
            left: 2.24px;
            top: 3.68px;
          }
          .liner-img2 {
            width: 3.84px;
            height: 1.6px;
            right: 2.24px;
            bottom: 1.92px;
          }
        }
        li:nth-child(2n + 1) {
          margin-right: 2.4px;
        }
      }
    }
  }
}
</style>
